<template>
	<view class="content">
		<image class="topBanner" src="../../static/home/banner.png" mode=""></image>
		<view class="bigBox">
			<!-- 钱包 -->
			<!-- <view class="moneyBox">
				<text class="tip">截止昨日可提取收益（元）</text>
				<span class="cashBox">
					<text class="moneyNum">{{freeMoney}}</text>
					<button @click="cashFun">提 现</button>
				</span>
				<view class="line"></view>
				<view class="freezeBox">
					<text class="tip">冻结收益（元）</text>
					<text class="moneyNum"
						style="color: rgba(229, 229, 229, 1); margin-top: 40px ;">{{waitMoney}}</text>
				</view>
				<view class="beforeBox">
					<text class="tip">已提现收益（元）</text>
					<text class="moneyNum" style="color: rgba(229, 229, 229, 1); margin-top: 40px">{{cashMoney}}</text>
				</view>
			</view> -->
			<moneyBoard @click="goto('/pages/index/me/cash',null)"></moneyBoard>
			<view class="hot">
				<view class="hotTop">
					<image src="/static/home/热门活动.png" alt="" mode="widthFix" />
					<text>热门故事会</text>
					<text class="moreBooks" @click="goto('/pages/index/book/books',1)">查看全部</text>
				</view>
				<view class="booksBox">
					<view class="booksItem" v-for="(bookGroupItem,index) in bookGroup" :key=bookGroupItem.id>
						<image :src="bookGroupItem.cover_url" alt="" mode="widthFix" />
						<view class="title">
							<text>{{bookGroupItem.name}}</text>
							<text class="label">{{'转化NO.'+(index+1)}}</text>
						</view>
						<span class="title2">
							<image src="/static/home/画板2.png" alt="" mode="widthFix" />
							{{ '上月累计收益：'+ bookGroupItem.money+ '元'}}
						</span>
						<button class="promotionBtn"
							@click="goto('/pages/index/book/books',bookGroupItem.id)">推广</button>
					</view>
					<!-- 					<view class="booksItem" v-for="hotBookItem in hotBooks" :key=hotBookItem.id>
						<image :src="hotBookItem.cover_url" alt="" mode="widthFix" />
						<view class="title">
							<text>{{hotBookItem.name}}</text>
							<text class="label">转化NO.1</text>
						</view>
						<span class="title2">
							<image src="/static/home/画板2.png" alt="" mode="widthFix" />
							{{ '连续30天收益：' + (hotBookItem.id[hotBookItem.id.length-4] === '0' ? hotBookItem.id.substring(hotBookItem.id.length - 3) : hotBookItem.id.substring(hotBookItem.id.length - 4)) + '元'}}
						</span>
						<button class="promotionBtn" @click="goto('/pages/index/book/bookInfo',hotBookItem.id)">推广</button>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<menuBox></menuBox>
	</view>
</template>

<script>
	import menuBox from '/pages/components/menu.vue'
	import moneyBoard from '/pages/components/moneyBoard.vue'
	import api from '../../api/api'

	export default {
		onShareAppMessage() {
			return {
				title: '皮皮推文',
				path: 'pages/index/index',
				success() {
					console.log('分享成功');
				},
				fail(err) {
					console.error('分享失败', err);
				}
			};
		},
		components: {
			menuBox,
			moneyBoard
		},
		data() {
			return {
				title: 'Hello',
				hotBooks: [],
				bookGroup: [
					{
						id: 3,
						name: "朵米故事会",
						money:"182414",
						cover_url: "../../static/home/duomi.jpg"
					},
					{
							id: 1,
							name: "黑岩故事会",
							money:"84751",
							cover_url: "../../static/home/heiyan.jpg"
						},
					{
						id: 4,
						name: "大鱼故事会",
						money:"61566",
						cover_url: "../../static/home/dayu.jpg"
					},{
						id: 2,
						name: "惊读故事会",
						money:"62578",
						cover_url: "../../static/home/jingdu.jpg"
					},
				],
			};
		},
		onLoad() {

		},
		mounted() {
			// this.getHot()
		},
		methods: {
			// //获取金额
			// getMoney() {
			// 	const self = this
			// 	uni.login({
			// 		provider: 'weixin', //获取微信的code
			// 		success: function(loginRes) {
			// 			console.log(loginRes);
			// 			const js_code = loginRes.code
			// 			//访问后台获取微信openId
			// 			api.getMoney({
			// 				js_code: js_code
			// 			}).then(res => {
			// 				console.log(res)
			// 				self.freeMoney = (res.data.money / 100).toFixed(2)
			// 				self.waitMoney = (res.data.waitMoney / 100).toFixed(2)
			// 				self.cashMoney = (res.data.cashMoney / 100).toFixed(2)
			// 			})
			// 		}
			// 	})
			// },
			// //提现按钮
			// cashFun() {
			// 	uni.showToast({
			// 		title: '功能正在开发中',
			// 		duration: 2000
			// 	})
			// },
			//获取热门书单
			getHot() {
				const self = this
				api.getHotBook().then(res => {
					console.log(res)
					if (res.code == 200 && res.data.length > 0) {
						self.hotBooks = res.data
						console.log(self.hotBooks)
					}
				})
			},
			goto(url, book_group_id) {
				console.log("goto",url)
				const self = this
				if (!!book_group_id) {
					url = url + '?book_group_id=' + book_group_id
				}
				uni.navigateTo({
					url: url,
				})
			}
		}
	};
</script>

<style scoped>
	.title {
		display: inline-block;
		position: absolute;
	}

	.booksItem .promotionBtn {
		position: absolute;
		right: 9px;
		bottom: 0px;
		width: 58px;
		height: 24px;
		line-height: 24px;
		border-radius: 16.53px;
		background: rgba(18, 205, 217, 1);
		border: 0.74px solid rgba(0, 186, 173, 1);
		box-shadow: 0px 0.74px 1.49px rgba(67, 207, 124, 0.25);
		font-size: 10.4px;
		color: rgba(255, 255, 255, 1);
	}

	.booksItem .title2 image {
		margin-left: 4px;
		width: 10px;
		height: 10px;
	}

	.booksItem image {
		width: 70px;
		height: 70px;
		margin-right: 10px;
	}

	.title2 {
		display: inline-block;
		height: 18px;
		background: linear-gradient(135deg, rgba(18, 205, 217, 0.23) 0%, rgba(18, 205, 217, 0) 100%);
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
		/* line-height: 28px; */
		vertical-align: bottom;
		margin-bottom: 5px;
	}

	.title .label {
		display: inline-block;
		width: 50px;
		height: 22px;
		font-size: 6px;
		line-height: 7.03px;
		color: rgba(255, 255, 255, 1);
		background: url(/static/home/画板1.png) no-repeat center center;
		background-size: 100% 100%;
		text-align: right;
		line-height: 28px;
		padding-right: 4px;
		margin-left: 4px;
	}

	.booksItem text {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		color: rgba(100, 217, 238, 1);
	}

	.booksItem {
		display: block;
		width: 100%;
		position: relative;
		margin: 10px 0;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.booksBox {
		width: 100%;
		height: calc(100% - 40px);
		overflow-y: auto;
	}

	.hotTop .moreBooks {
		right: 6px;
		left: unset;
		font-size: 10px;
		color: rgba(18, 205, 217, 1);
	}

	.hotTop text {
		display: inline-block;
		font-size: 14px;
		line-height: 20.27px;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		left: 38px;
		top: 50%;
		transform: translateY(-50%);
	}

	.hotTop image {
		width: 20px;
		height: 24px;
		position: absolute;
		top: 50%;
		left: 3px;
		transform: translateY(-50%);
	}

	.hotTop {
		position: relative;
		width: 100%;
		height: 40px;
		border-radius: 5px 5px, 0px, 0px;
		background: linear-gradient(135deg, rgba(18, 205, 217, 0) 0%, rgba(18, 205, 217, 0.45) 100%);
	}

	.hot {
		width: 100%;
		height: calc(100% - 264px);
		margin-top: 20px;
		background-color: red;
		border-radius: 5px;
		background: rgba(56, 56, 56, 1);
	}

	.freezeBox,
	.beforeBox {
		width: 50%;
		display: inline-block;
		position: relative;
	}

	.line {
		position: relative;
		width: 95%;
		height: 0px;
		border-bottom: 1px solid rgba(87, 87, 87, 1);
		margin: 0 auto;
	}

	.cashBox {
		display: block;
		position: relative;
		top: 20px;
		width: 100%;
		height: 60px;
	}

	.moneyNum {
		position: absolute;
		left: 16px;
		font-size: 20px;
		color: rgba(18, 205, 217, 1);
	}

	.cashBox button {
		position: absolute;
		right: 11px;
		width: 60px;
		display: inline;
		font-size: 10.4px;
		color: rgba(255, 255, 255, 1);
		background-color: rgba(18, 205, 217, 1);
		border: 0.74pxsolidrgba (0, 186, 173, 1);
		box-shadow: 0px0.74px1.49pxrgba (67, 207, 124, 0.25);
		border-radius: 16.53px;
	}

	.tip {
		display: inline-block;
		margin-left: 16px;
		margin-top: 14px;
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
	}

	.moneyBox {
		width: 100%;
		height: 170px;
		position: relative;
		background-image: url(/static/home/矩形 1@3x.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 1px;
	}

	.topBanner {
		overflow: hidden;
		width: 120%;
		height: 390px;
		background: rgba(204, 204, 204, 1);
		position: absolute;
		top: -120px;
		left: -10%;
		border-radius: 50%;
	}

	.bigBox {
		width: 90%;
		height: 100%;
		position: relative;
		margin: 0 auto;
		padding-top: 100px;
		box-sizing: border-box;
	}

	.content {
		width: 100%;
		height: 100vh;
		background-color: rgba(34, 34, 34, 1);
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow-x: hidden;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>